<?php

// start the session
session_start();

// start buffering the output
ob_start();

// require the database and login libraries
require_once("database.php");
require_once("liblogin.php");

?>
<html>
<head>
<title>UC Irvine | Professor Assignment System - Assign Courses</title>

<style type="text/css">
body {background-image: url('images/bg4_whiteEdit_68.jpg'); background-repeat:no-repeat; background-position: center top;}
</style>

<link rel="stylesheet" href="css/general.css" />
<link type="text/css" href="css/custom-theme/jquery-ui-1.8.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>

</head>
<body>

<?php echo createFixedMenu(); ?>

<div id="courseDialog" class="classDialogText">
	<b>Course Code:</b> <span id="courseDialogCode"></span><br /><br />
	<b>Course Name:</b> <span id="courseDialogName"></span><br /><br />
	<b>Course Type:</b> <span id="courseDialogType"></span><br /><br />
	<b>Students:</b> <span id="courseDialogStudents"></span><br /><br />
	<b>Notes:</b> <span id="courseDialogNotes"></span>
</div>

<div style="text-align:center;height:410px;width:875px;margin-left:auto;margin-right:auto;">

<!-- ####################### BEGIN FACULTY SELECTION WINDOW ######################## -->

<div id="faculty" style="float:left;text-align:center;height:410px;width:150px;border:1px dotted black">

	<h3>Faculty</h3>

	<span class="smallText">Drag faculty members to the Assignments table</span><br /><br />

	<!-- Listing of draggable faculty -->

	<div style="height:300px;width:110px;margin-left:auto;margin-right:auto;overflow:auto">

		<!-- Al-Ani -->

		<div id="draggable_master" class="draggable ui-widget-content" style="float:left">
			<input type="hidden" id="hiddenName" value="Al-Ani" />
			<input type="hidden" id="instructorID" value="2" />
			<div id="innerLabel" class="draggableLabel">
				Al-Ani
			</div>
		</div>

		<!-- Lopes -->

		<div id="draggable_master" class="draggable ui-widget-content" style="float:left">
			<input type="hidden" id="hiddenName" value="Lopes" />
			<input type="hidden" id="instructorID" value="7" />
			<div id="innerLabel" class="draggableLabel">
				Lopes
			</div>
		</div>

		<!-- Kay -->

		<div id="draggable_master" class="draggable ui-widget-content" style="float:left">
			<input type="hidden" id="hiddenName" value="Kay" />
			<input type="hidden" id="instructorID" value="5" />
			<div id="innerLabel" class="draggableLabel">
				Kay
			</div>
		</div>

		<!-- Kobsa -->

		<div id="draggable_master" class="draggable ui-widget-content" style="float:left">
			<input type="hidden" id="hiddenName" value="Kobsa" />
			<input type="hidden" id="instructorID" value="9" />
			<div id="innerLabel" class="draggableLabel">
				Kobsa
			</div>
		</div>

		<!-- Olson, G. -->

		<div id="draggable_master" class="draggable ui-widget-content" style="float:left">
			<input type="hidden" id="hiddenName" value="Olson, G." />
			<input type="hidden" id="instructorID" value="3" />
			<div id="innerLabel" class="draggableLabel">
				Olson, G.
			</div>
		</div>

		<!-- Olson, J. -->

		<div id="draggable_master" class="draggable ui-widget-content" style="float:left">
			<input type="hidden" id="hiddenName" value="Olson, J." />
			<input type="hidden" id="instructorID" value="4" />
			<div id="innerLabel" class="draggableLabel">
				Olson, J.
			</div>
		</div>
		
		<!-- Thornton -->

		<div id="draggable_master" class="draggable ui-widget-content" style="float:left">
			<input type="hidden" id="hiddenName" value="Thornton" />
			<input type="hidden" id="instructorID" value="6" />
			<div id="innerLabel" class="draggableLabel">
				Thornton
			</div>
		</div>

		<!-- Ziv -->

		<div id="draggable_master" class="draggable ui-widget-content" style="float:left">
			<input type="hidden" id="hiddenName" value="Ziv" />
			<input type="hidden" id="instructorID" value="1" />
			<div id="innerLabel" class="draggableLabel">
				Ziv
			</div>
		</div>
	</div>
</div>

<!-- ####################### END FACULTY SELECTION WINDOW ######################## -->

<!-- ####################### BEGIN SPREADSHEET ASSIGNMENTS VIEW ################### -->

<div style="float:left;margin-left:3px;text-align:center;">

<h3>Class Assignments for 2010 - 2012</h3><br />

<div style="float:left">

<!-- ####################### BEGIN HORIZONTAL LABELS ########################### -->

<?php

// list of course terms
$terms = array(array("TermCode"=>"f10","TermName"=>"Fall '10"),array("TermCode"=>"w11","TermName"=>"Winter '11"),array("TermCode"=>"sp11","TermName"=>"Spring '11"),array("TermCode"=>"f11","TermName"=>"Fall '11"),array("TermCode"=>"w12","TermName"=>"Winter '12"),array("TermCode"=>"sp12","TermName"=>"Spring '12"));

// print out the term spacer
echo "\t<div id=\"spacer\" class=\"termLabel\">&nbsp;</div>\n\n";

// print out each term
foreach($terms as $term)
{
	echo "\t<div id=\"termLabel" . strtoupper($term['TermCode']) . "\" name=\"" . $term['TermCode'] . "\" class=\"termLabel\">" . $term['TermName'] . "</div>\n\n";
}

?>

<!-- ####################### END HORIZONTAL LABELS ########################### -->

</div>

<br />

<div id="assignCoursesGrid" style="float:left;overflow-y:scroll;overflow-x:hidden;height:300px;">

<!-- ####################### BEGIN COURSE DISPLAYS ####################### -->

<?php

// get the list of classes
$classes = getClassList();

foreach($classes as $class)
{
	// create the comment with the class code
	echo "<!-- " . $class['ClassCode'] . " -->\n\n";
	
	// create the clickable class item
	echo "<div id=\"classLabelContainer\" name=\"" . strtolower($class['ClassDept']) . strtolower($class['ClassNumber']) . "\" class=\"classLabelContainer\">\n";
	echo "\t<div id=\"classLabel\" class=\"classLabel manageCoursesItem" . $class['ClassType'] . "\">\n";
	echo "\t\t<input type=\"hidden\" id=\"className\" value=\"" . $class['ClassName'] . "\" />\n";
	echo "\t\t<input type=\"hidden\" id=\"classType\" value=\"" . getClassTypeName($class['ClassType']) . "\" />\n";
	echo "\t\t<input type=\"hidden\" id=\"classStudents\" value=\"" . $class['ClassStudents'] . "\" />\n";
	echo "\t\t<input type=\"hidden\" id=\"classNotes\" value=\"" . $class['ClassNotes'] . "\" />\n";
	echo "\t\t<a href=\"#\" id=\"classCode\" class=\"classCodeLink\" title=\"Click for course information\">" . $class['ClassCode'] . "</a>\n";
	echo "\t</div>\n";
	echo "</div>\n\n";
	
	// create the container for the term sections for this class
	echo "<div id=\"" . strtolower($class['ClassDept']) . strtolower($class['ClassNumber']) . "\" style=\"float:left\">\n";
	echo "\t<input type=\"hidden\" id=\"classID\" value=\"" . $class['ID'] . "\" />\n\n";
	echo "\t<!-- Terms -->\n\n";
	
	// create the droppable term sections for this class
	foreach($terms as $term)
	{
		echo "\t<div id=\"droppable_" . $term['TermCode'] . "\" class=\"droppable\">\n";
		
		if(sizeof($class['Instructors']) > 0)
		{
			// there are instructors assigned to this course
			for($i = 0; $i < sizeof($class['Instructors']); $i++)
			{
				// make sure it's the correct term
				if($class['Instructors'][$i]['Term'] == $term['TermCode'])
				{
					// add each instructor to the droppable class element
					echo "<div id=\"draggable_copy\" class=\"draggable ui-widget-content\" style=\"float:left\">";
					echo "<input type=\"hidden\" id=\"hiddenName\" value=\"" . $class['Instructors'][$i]['LastName'] . "\" />";
					echo "<input type=\"hidden\" id=\"instructorID\" value=\"" . $class['Instructors'][$i]['instructorID'] . "\" />";
					echo "<div id=\"innerLabel\" class=\"draggableLabel\">";
					echo $class['Instructors'][$i]['LastName'];
					echo "</div>";
					echo "</div>";
				}
			}
		}
		
		echo "\t</div>\n\n";
	}
	
	echo "</div>\n";
	echo "<br />\n\n";
}

?>

<!-- ####################### END COURSE DISPLAYS ####################### -->

</div>

</div>

</div>

<br /><br />

<?php include("includes/footer.php"); ?>

<!-- ####################### END SPREADSHEET ASSIGNMENTS VIEW ################### -->

<script type="text/javascript">
	function removeAssignment(instructorID,courseID,term)
	{
		// remove the assignment from the database
		$.ajax({
			type: "POST",
			url: "process.php",
			data: "formName=removeCourseAssignment&courseID=" + courseID + "&instructorID=" + instructorID + "&term=" + term,
			success: function(msg){}
		});
	}
	
	$(function() {

		// set up the display of the "Course Information" dialog
		$("#courseDialog").dialog({ autoOpen: false, title: 'Course Information', resizable: false, height: 200 });
		
		// allow all the <div> tags with an "id" attribute equaling "draggable_master" to be draggable
		$("div[id='draggable_master']").draggable({helper: 'clone', scroll: true, revert: 'invalid'});
		
		// allow all the pre-existing <div> tags with an "id" attribute equaling "draggable_copy" to be draggable
		$("div[id='draggable_copy']").draggable({helper: 'original', grid: [100,25], containment: '#assignCoursesGrid', revert: 'invalid', start: function(event, ui)
			{
				// figure out the course and instructor IDs, along with the term
				var instructorID = $(this).children("#instructorID").attr("value");
				var courseID = $(this).parent().parent().children("#classID").attr("value");
				var term = $(this).parent().attr("id").replace("droppable_","");
				
				// set arbitrary data for this element
				$(this).data('instructorID',instructorID);
				$(this).data('courseID',courseID);
				$(this).data('term',term);

				// remove the assignment from the database
				removeAssignment(instructorID, courseID, term);
			}
		}).prepend("<span class='ui-icon ui-icon-close' style='float:right;cursor:pointer;' onClick='if(confirm(\"Are you sure you want to remove \" + $(this).next().val() + \" from the grid?\")) {$(this).parent().fadeOut(\"slow\", function() {$(this).remove();" + "removeAssignment(" + $(this).parent().data('instructorID') + "," + $(this).parent().data('courseID') + ",\"" + $(this).parent().data('term') + "\");});}'></span>");
		
		// allow all the <div> tags with an "id" attribute beginning with "drop" to be droppable
		$("div[id^='drop']").droppable({
			hoverClass: 'courseColumnHighlight',
			drop: function(event, ui) {

				// figure out the course and instructor IDs, along with the term
				var instructorID = ui.draggable.children("#instructorID").attr("value");
				var courseID = $(this).parent().children("#classID").attr("value");
				var term = $(this).attr("id").replace("droppable_","");

				// check to make sure we're only ever copying the master element
				if(ui.draggable.attr("id") == "draggable_master")
				{
					// copy the dragged element to this container and change its ID
					var element = ui.draggable.clone();
					element.draggable({helper: 'original', grid: [100,25], containment: '#assignCoursesGrid', revert: 'invalid', start: function(event, ui)
						{
							// remove the assignment from the database
							removeAssignment(instructorID, courseID, term);
						}
					});
					element.attr("id", "draggable_copy");
					element.appendTo(this).prepend("<span class='ui-icon ui-icon-close' style='float:right;cursor:pointer;' onClick='if(confirm(\"Are you sure you want to remove \" + $(this).next().val() + \" from the grid?\")) {$(this).parent().fadeOut(\"slow\", function() {$(this).remove();" + "removeAssignment(" + instructorID + "," + courseID + ",\"" + term + "\");});}'></span>");
				}
				
				// send an AJAX call to the database to save this assignment so pages can be switched without data loss
				$.ajax({
					type: "POST",
					url: "process.php",
					data: "formName=assignCourse&courseID=" + courseID + "&instructorID=" + instructorID + "&term=" + term,
					success: function(msg){}
				});
			}
		});

		// cause a highlight effect to occur when the user is hovering over a droppable cell
		/*$("div[id^='drop']").hover(
			function() {
				$(this).addClass("courseColumnHighlight");
			},
			function() {
				$(this).removeClass("courseColumnHighlight");
			}
		);*/

		// cause a highlight effect to occur when the user is hovering over a class label
		$("div[id='classLabelContainer']").hover(
			function() {
				$("#" + $(this).attr("name")).addClass("courseRowHighlight");
			},
			function() {
				$("#" + $(this).attr("name")).removeClass("courseRowHighlight");
			}
		);

		// cause a highlight effect to occur when the user is hovering over a term label
		$("div[id^='termLabel']").hover(
			function() {
				$("div[id^='droppable_" + $(this).attr("name") + "']").addClass("courseColumnHighlight");
			},
			function() {
				$("div[id^='droppable_" + $(this).attr("name") + "']").removeClass("courseColumnHighlight");
			}
		);
		
		// cause a dialog to appear when the user clicks on a class code link
		$("a[id='classCode']").click(
			function() {
				$("#courseDialog").children("#courseDialogCode").html($(this).text());
				$("#courseDialog").children("#courseDialogName").html($(this).parent().children("#className").attr("value"));
				$("#courseDialog").children("#courseDialogType").html($(this).parent().children("#classType").attr("value"));
				$("#courseDialog").children("#courseDialogStudents").html($(this).parent().children("#classStudents").attr("value"));
				$("#courseDialog").children("#courseDialogNotes").html($(this).parent().children("#classNotes").attr("value"));
				$("#courseDialog").dialog("open");
			}
		);
	});
</script>

</body>
</html>
<?php

// print out the buffer
ob_end_flush();

?>